<ui:composition template="../../templates/template.xhtml" xmlns="http://www.w3.org/1999/xhtml"  xmlns:f="http://java.sun.com/jsf/core" 
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">

	<!-- Page title -->
	<ui:define name="title">${msg.user_my_account_title}</ui:define>
	
	<!-- Page content -->
	<ui:define name="content">
		
		<!-- Breadcrumb -->
		<h:form id="myAccountBreadcrumbForm">
			<p:breadCrumb styleClass="breadcrumb">
				<p:menuitem title="${msg.user_my_account_breadcrumb_home}" url="#{navigationBean.accessHomePage}" />
				<p:menuitem disabled="true" styleClass="userCategoryColor" value="#{msg.user_my_account_breadcrumb_my_account}"/>
			</p:breadCrumb>
		</h:form>
		
		<!-- Tabview -->	
		<h:form id="myAccountTabViewForm">
		
			<span class="globalMessages">
				<p:messages autoUpdate="true"/>
			</span>
			
			<p:tabView effect="fade" effectDuration="normal" id="myAccountTabView" styleClass="tabView userTabView userCategoryBackground userCategoryTabColor">
				
				<!-- Profile -->
				<p:tab title="${msg.user_my_account_tabview_tab_profile}">
					<p:outputPanel layout="block" styleClass="formTable">
						<div class="formRow">
							<span class="formCell formLabelCell">
								<label for="myAccountEMail">${msg.user_my_account_form_email}</label>
							</span>
							<span class="formCell">
								<p:inputText disabled="true" id="myAccountEMail" label="${msg.user_my_account_form_email}" maxlength="100" required="true" 
								requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_my_account_form_email}" value="#{myAccountBean.currentMember.email}"/>
							</span>
						</div>
						<div class="formRow">
							<span class="formCell formLabelCell">
								<label for="myAccountSubscriptionDate">${msg.user_my_account_form_subscription_date}</label>
							</span>
							<span class="formCell">
								<p:inputText disabled="true" id="myAccountSubscriptionDate"  value="#{myAccountBean.currentMember.subscriptionJdkDate}">
									<f:convertDateTime dateStyle="short" locale="#{userBean.currentLocale.language}"/>
								</p:inputText>
							</span>
						</div>
						<div class="formRow">
							<span class="formCell formLabelCell">
								<label class="required" for="myAccountLocale">${msg.user_my_account_form_language}</label>
							</span>
							<span class="formCell">
								<p:selectOneMenu id="myAccountLocale" panelStyleClass="formSelectOneMenuPanel userCategoryBackground userCategoryHighlightBorderColor" required="true" 
								requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_my_account_form_language}" styleClass="formSelectOneMenu" 
								value="#{myAccountBean.currentMember.locale}" var="lang">
									<f:selectItems value="#{myAccountBean.availableLanguages}" var="language" itemLabel="#{language.label}" itemValue="#{language}"/>
									<p:column>
										<p:graphicImage value="/includes/icons/languages/flags/#{lang.locale.language}_#{lang.locale.country}.png" />
									</p:column>
									<p:column>#{lang.label}</p:column>
								</p:selectOneMenu>
							</span>
						</div>
						<div class="formRow">
							<span class="formCell formLabelCell">
								<label for="myAccountPassword">${msg.user_my_account_form_password}</label>
							</span>
							<span class="formCell">
								<p:password id="myAccountPassword" value="#{myAccountBean.oldPassword}"/>
							</span>
						</div>
						<div class="formRow">
							<span class="formCell formLabelCell">
								<label for="myAccountNewPassword">${msg.user_my_account_form_new_password}</label>
							</span>
							<span class="formCell">
								<p:password feedback="true" goodLabel="${msg.general_form_password_good_label}" id="myAccountNewPassword" match="myAccountNewPasswordConfirmation" 
								promptLabel="${msg.general_form_password_prompt_label}" strongLabel="${msg.general_form_password_strong_label}" 
								validatorMessage="${msg.general_form_passwords_do_not_match}" value="#{myAccountBean.newPassword}" weakLabel="${msg.general_form_password_weak_label}" />
							</span>
						</div>
						<div class="formRow">
							<span class="formCell formLabelCell">
								<label for="myAccountNewPasswordConfirmation">${msg.user_my_account_form_new_password_confirmation}</label>
							</span>
							<span class="formCell">
								<p:password id="myAccountNewPasswordConfirmation" />
							</span>
						</div>
					</p:outputPanel>
				</p:tab>
				
				<!-- Personal details -->
				<p:tab title="${msg.user_my_account_tabview_tab_personal_details}">
					<p:outputPanel layout="block" styleClass="formTable">
						<div class="formRow">
							<span class="formCell formLabelCell">
								<label class="required" for="myAccountName">${msg.user_my_account_form_name}</label>
							</span>
							<span class="formCell">
								<p:inputText id="myAccountName" label="${msg.user_my_account_form_name}" maxlength="50" required="true" 
								requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_my_account_form_name}" value="#{myAccountBean.currentMember.name}" />
							</span>
						</div>
						<div class="formRow">
							<span class="formCell formLabelCell">
								<label class="required" for="myAccountFirstName">${msg.user_my_account_form_first_name}</label>
							</span>
							<span class="formCell">
								<p:inputText id="myAccountFirstName" label="${msg.user_my_account_form_first_name}" maxlength="50" required="true" 
								requiredMessage="${msg.general_form_missing_required_value}: ${msg.user_my_account_form_first_name}" value="#{myAccountBean.currentMember.firstName}"/>
							</span>
						</div>
					</p:outputPanel>
				</p:tab>
				
				<!-- Social networks -->
				<p:tab disabled="true" title="${msg.user_my_account_tabview_tab_social_networks}"></p:tab>
				
			</p:tabView>
			
			<!-- Buttons line -->
			<p:outputPanel layout="block" styleClass="formButtonsLine userFormButtonsLine">
				<p:commandButton action="#{myAccountBean.updateMember}" icon="userCategoryIconSprite ui-icon-circle-check" id="accountUpdateButton" styleClass="userCategoryBackground"
				update="myAccountTabViewForm:myAccountTabView:myAccountPassword myAccountTabViewForm:myAccountTabView:myAccountNewPassword 
				myAccountTabViewForm:myAccountTabView:myAccountNewPasswordConfirmation :userIdentity" value="${msg.user_my_account_form_button_update}" />
			</p:outputPanel>
		</h:form>
		
		<!-- Block UI -->
		<ui:include src="../../components/blockUI.xhtml">
			<ui:param name="block" value="myAccountTabViewForm:myAccountTabView" />
			<ui:param name="trigger" value="myAccountTabViewForm:myAccountTabView, myAccountTabViewForm:accountUpdateButton" />
			<ui:param name="widgetVar" value="myAccountTabViewBlockUI" />
		</ui:include>

	</ui:define>
	
</ui:composition>